<template>
<div class="main-container main-container-s" id="app">
    <div id="mapDiv" class="map-div" style="background: url('../img/gis/mapbg.png') repeat;">
    </div>
    <div class="left-tree" style="margin-top: 5px;">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
    <div class="right-list open" style="margin-top: 5px;max-height: calc(100% - 10px);">
        <div class="message-panel message-center">
            <div class="message-head"  onclick="$(this).parent().next().toggle();"><span class="msg-c_title">重点人员信息列表</span></div>
            <div class="message-body" style="height: 40px;">
                <ul class="msg-c_info">
                    <li class="item" id="focusTotal">重点人员总数：</li>
                    <!--<li class="item" style="color: #5d9606;float: left;" id="fullTimeWorker">专职网格员数：</li>-->
                    <!--<li class="item" style="color: #cac8c8;float: left;margin-left: 15px;" id="partTimeWorker">兼职网格员：</li>-->
                </ul>
            </div>
        </div>

        <div class="message-grid">
            <div class="message-grid-wrapper">
                <div class="message-grid-main">
                    <div class="message-list" id="focusList">
                        <ul>
                            <div class="loader-more-btn">没有更多</div>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import {loadScript, loadCss,loadModules} from 'esri-loader';
import website from '@/config/website';
import {getDeptTreeNode,getFocusListByGrid,getFocusByDeptCode} from "@/api/xapply/doubleReal/focusGis";
import $ from "@/assets/jquery-vendor.js";
import {getNextLevelGridServerNameByDeptCode,
        getAppendParamByDeptCode,
        getGridServerNameByDeptCode,
        getGridLevelByDeptCode
        } from "@/assets/js/gis/util.js";
import "@/assets/js/gis/jquery.ztree.core.js";
import "@/assets/js/gis/jquery.ztree.excheck.min.js";
import "@/assets/css/gis/default.css";
import "@/assets/css/gis/zTreeStyle/zTreeStyle.css";
import "@/assets/css/gis/video.css";
import "@/assets/css/gis/map.css";
//var map,gridGraphicsLayer,gridFillSymbol,countyGridArray;
//var zTreeObj; //zTree实例
var 
    //zTreeObj, //zTree实例
    map, //地图实例
    gridGraphicsLayer, //地图网格范围图层
    //textGraphicsLayer, //网格名称标注图层
    gridFillSymbol, //地图网格填充符号
    // pickedGridLayer, //选中网格图层
    // gridWorkerLayer, //网格员图层
    // cameraLayer, //视频监控图层
    // trailLayer, //网格员轨迹实时位置图层
    // trailShowLayer, //网格员轨迹展示图层
    // locationLayer, //网格员分布图层
    focusPeopleLayer, //重点人员图层
    currentGridPolygon, //当前选中网格范围
    countyGridArray; //区县网格范围集合
    
export default {
  name: 'web-map',
  data() {
      return{
        config: {
                cameraServerUrl: 'GIS_CAMERA',
                baseGridServerUrl: 'GIS_GRID',
                topDeptCode: '',
                topGridId: ''
            },
          commonData: {
               moduleOpenStatue: {
                    focus: true
                },
              moduleStatue: {
                  leader: true,
                  worker: false
              },
              gridCode: ''
          },
           focusData: {
                FocusPeopleArr: []
            }
      }
  },
    created() {
        let _this =this;
        _this.init();
        window.zoomToFocus=_this.zoomToFocus;
    },
    methods: {
      //加载左侧树
        init(){
              var setting = {data: {simpleData: {enable: true}}, callback: {onClick: this.treeClick}};
              getDeptTreeNode().then(res => {
                const result = res.data;
                $.fn.zTree.init($("#treeDemo"), setting, result.treeNodes);
                  this.config.topDeptCode = result.deptCode;
                  this.config.topGridId = result.gridId;
                  this.commonData.gridCode = result.deptCode;
                  this.initMap();
            })
        },
        //树点击
        treeClick(event, treeId, treeNode) {
            console.log(treeNode);
            if (treeNode.pId == '0' || treeNode.pId == null) {
                this.commonData.gridCode = this.config.topDeptCode;
            }
            else {  
                this.commonData.gridCode = treeNode.deptCode;
            }
            this.getGridAreaAndData();
        },
        //初始化地图
        initMap(){
            console.log("----");
          loadScript({ url: website.InitUrl})
          loadCss(website.CssUrl)
          loadModules([
                      'esri/map',
                      'esri/layers/ArcGISTiledMapServiceLayer',
                      'esri/layers/GraphicsLayer',
                      'esri/geometry/Polygon',
                      'esri/symbols/SimpleFillSymbol',
                      'esri/symbols/SimpleLineSymbol',
                      'esri/graphic',
                      'esri/Color',
                      'esri/graphicsUtils',
                      'dijit/dijit',
                      'esri/lang',
                      'dojo/dom-style',
                      //'esri/symbols/Font',
                      //'esri/symbols/TextSymbol',
                      //'esri/SpatialReference',
                      //'esri/geometry/Point',
                      'dojo/domReady!',
                  ], { css: true })
                  .then(([
                      Map,
                      ArcGISTiledMapServiceLayer,GraphicsLayer,Polygon,SimpleFillSymbol,SimpleLineSymbol,Graphic,Color,graphicsUtils,dijit,lang,domStyle
                  ]) => {
                      //实例化地图
                      map = new Map("mapDiv", {
                      center: website.MapCenterPoint,
                      zoom: 12,
                      slider: false, //缩放按钮移除
                      logo: false, //logo移除
                      isDoubleClickZoom: false,
                      });
                      let _this = this ;
                      //加载图层
                      let mapServer = new ArcGISTiledMapServiceLayer(website.BaseMapUrl)
                      map.addLayer(mapServer)
                      //地图网格填充符号
                      gridFillSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                          new Color([66, 0, 0]), 1), new Color([255, 99, 33, 0.15]));
                      //地图网格范围层
                      gridGraphicsLayer = new GraphicsLayer({id: "gridGraphicsLayer"});
                      map.addLayer(gridGraphicsLayer);
                      //tanceng
                      var content =  "<b>${xzqhmc}</b>";
                      gridGraphicsLayer.on("mouse-over", function (evt) {
                          showTooltip(evt, content);
                      });
                      gridGraphicsLayer.on("mouse-out", function () {
                          closeDialog();
                      });
                      function showTooltip(evt, cont, id){
                          console.log("鼠标事件");
                        if(!evt.graphic) return;
                        if(!id) id = "tooltipDialog";
                        closeDialog(id);
                        if(id == "tooltipDialog" ){
                            map.setMapCursor("pointer");
                        }
                        var dialog = new dijit.TooltipDialog({
                            id : id,
                            style : "position: absolute;padding:0px;margin:0;background-color:#fff;font: normal normal normal 13pt Helvetica;z-index:10000;color:black;width:200px;height:auto"
                        });
                        var content = lang.substitute(evt.graphic.attributes, cont);
                        dialog.setContent(content);
                        domStyle.set(dialog.domNode, "opacity", 1);
                        dijit.placeOnScreen(dialog.domNode, {x: evt.pageX, y: evt.pageY}, ["TL", "BL"], {x: 10, y: 10});
                        }

                      function closeDialog(id) {
                          if(!id){
                              id = "tooltipDialog";
                              map.setMapCursor("default");
                          }
                          var widget = dijit.byId(id);
                          if (widget) {
                              widget.destroy();
                          }
                      }
                    //重点人员图层
                    focusPeopleLayer = new GraphicsLayer({id: "focusPeopleLayer"});
                    map.addLayer(focusPeopleLayer);

                    focusPeopleLayer.on("click",focusPeopleLayerClick);

                        function focusPeopleLayerClick(e){
                            if(e.graphic && e.graphic.attributes.gridId){
                                _this.getFocusListByGrid(e.graphic.attributes.gridId);
                            }
                        }

                      map.on("load", mapLoad);
                      map.on("click", mapClick);

                      function mapLoad() {
                          console.log("开始load");
                          initMapGrid();
                      }

                      function mapClick(e) {
                          console.log(e.mapPoint.x + "  -----   " + e.mapPoint.y);
                          if (!e.graphic)
                              map.infoWindow.hide();
                          else if (e.graphic.attributes && e.graphic.attributes["xzqhdm"]) {
                              _this.commonData.gridCode = e.graphic.attributes["xzqhdm"];
                              _this.getGridAreaAndData();
                          }
                      }
                      //以下本应该放在方法里

                      function initMapGrid() {
                        //          GIS_GRID           + 济南 2;槐荫区 3；居委会 4； 网格 5
                        var layer = _this.config.baseGridServerUrl + getNextLevelGridServerNameByDeptCode(_this.config.topDeptCode);
                        console.log(layer);
                        var baseUrl = website.GeoServerBaseUrl + '/cite/ows?service=WFS&version=1.1.0&request=GetFeature&typename=' + layer + '&outputFormat=json&maxFeatures=80';
                        var appendParam = getAppendParamByDeptCode(_this.config.topDeptCode);
                        console.log(appendParam);
                        baseUrl += "&cql_filter=" + appendParam;
                          console.log(baseUrl);
                        $.ajax({
                            type: 'post',
                            url: baseUrl,
                            dataType: 'json',
                            success: success
                        });
                        function success(result) {
                            console.log(result);
                            gridGraphicsLayer.clear();
                            //textGraphicsLayer.clear();
                            if (!countyGridArray)
                                countyGridArray = result.features;
                            for (var i = 0; i < result.features.length; i++) {
                                var obj = result.features[i];
                                var polygonJson;
                                if (obj.geometry.type === "Polygon") {
                                    polygonJson = {"rings": obj.geometry.coordinates, "spatialReference": {"wkid": website.Mapwkid}};
                                } else {
                                    var geoArr = [];
                                    for (var n = 0; n < obj.geometry.coordinates.length; n++) {
                                        geoArr.push(obj.geometry.coordinates[n][0]);
                                    }
                                    polygonJson = {"rings": geoArr, "spatialReference": {"wkid": website.Mapwkid}};
                                }
                                var polygon = new Polygon(polygonJson);
                                var gra = new Graphic(polygon, gridFillSymbol, obj.properties);
                                gridGraphicsLayer.add(gra);

                                //var font = new Font("15px", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_NORMAL);
                                //var textSymbol = new TextSymbol(obj.properties["XZQHMC"], font, new Color([0, 33, 99]));
                                //var point = new Point(obj.properties.LNG, obj.properties.LAT, new esri.SpatialReference(4326));
                                //var labelPointGraphic = new Graphic(point, textSymbol);
                            }
                            map.setExtent(graphicsUtils.graphicsExtent(gridGraphicsLayer.graphics), true);
                            _this.getGridAreaAndData();
                        }
                    }
                   

                    
                   
              })
        },//init 结束
         getGridAreaAndData() {
            this.clearMap();
            this.getGridData();
            this.getCurrentGridGeom();
        },
        clearMap() {
            map.infoWindow.hide();
            gridGraphicsLayer.clear();
            focusPeopleLayer.clear();
            currentGridPolygon = "";
        },

        getGridData() {
            this.getGridListByAttribute(this.commonData.gridCode);
        },
        getCurrentGridGeom() {
            console.log("获取code=="+this.commonData.gridCode);
            var layer = this.config.baseGridServerUrl + getGridServerNameByDeptCode(this.commonData.gridCode);
            var baseUrl = website.GeoServerBaseUrl + '/cite/ows?service=WFS&version=1.1.0&request=GetFeature&typename=' + layer + '&outputFormat=json&maxFeatures=80';
            if (getGridLevelByDeptCode(this.commonData.gridCode) !== "1") {
                var appendParam = "xzqhdm=" + this.commonData.gridCode;
                baseUrl += "&cql_filter=" + appendParam;
            }
            $.ajax({
                type: 'post',
                url: baseUrl,
                dataType: 'json',
                success: this.gotCurrentGridGeomResult
            });
        },
        gotCurrentGridGeomResult(result) {
            if (result && result.features.length >= 1) {
                var obj = result.features[0];
                var polygonStr = "";
                if("MultiPolygon" === obj.geometry.type){
                    for (var i = 0; i < obj.geometry.coordinates[0][0].length; i++) {
                        polygonStr += obj.geometry.coordinates[0][0][i][0] + "," + obj.geometry.coordinates[0][0][i][1] + " "
                    }
                }else{
                    for (var j = 0; j < obj.geometry.coordinates[0].length; j++) {
                        polygonStr += obj.geometry.coordinates[0][j][0] + "," + obj.geometry.coordinates[0][j][1] + " "
                    }
                }
                currentGridPolygon = polygonStr;
                console.log(currentGridPolygon);
            }else if(getGridLevelByDeptCode(this.commonData.gridCode) !== "0"){
                // $.modal.alertWarning("此区域未划分网格。");
                console.log("此区域未划分网格。");

            }
             this.getModuleData();
        },
        // 查询当前点击网格结束后查询的数据。包括：视频监控（camera） 网格员轨迹（trail）
        getModuleData() {
            this.treeClickSearchFocus();
        },
        // 查询下级网格结束后查询的数据。包括：网格员（worker）
        getNextModuleData() {
            this.treeClickSearchFocus();
        },
        treeClickSearchFocus() {
            console.log("getFocusByDeptCode====="+this.commonData.gridCode);
             getFocusByDeptCode(this.commonData.gridCode).then(res => {
                const result = res.data;
                console.log(result);
                if(result.success === "success" && result.dataType === "count")
                    {
                        console.log("11111111111");
                        this.addFocusCountOnMap(result.data);
                    }else if(result.success === "success" && result.dataType === "list"){
                         console.log("55555555555");
                        this.addFocusOnMap(result.data);
                        this.setListData(result.gridInfo,result.data);
                    }
                    $("#focusTotal").html("重点人员总数：" + result.total);
                });
        },
        addFocusCountOnMap(dataArr) {
            loadModules([
                            'esri/symbols/TextSymbol',
                            'esri/symbols/Font',
                            'esri/Color',
                            'esri/geometry/Point',
                            'esri/graphic',
                            "esri/symbols/PictureMarkerSymbol",
                            'esri/SpatialReference'
                        ], { css: true })
                        .then(([TextSymbol,Font,Color,Point,Graphic,PictureMarkerSymbol,SpatialReference]) => {    
                            console.log("11010101010")         
                        let _this = this;   
                        var red = new PictureMarkerSymbol("../../../assets/img/gis/icon/GreenPin1LargeB.png", 64, 64).setOffset(0, 30);
                        for (var i = 0; i < countyGridArray.length; i++) {
                            for (var j = 0; j < dataArr.length; j++) {
                                if (countyGridArray[i].properties["GRID_ID"] == dataArr[j].gridId) {
                                    var countSym = new TextSymbol(dataArr[j].count).setColor(new Color([255, 255, 255])).setAlign(Font.ALIGN_START).setOffset(0, 24);
                                    var point = new Point(countyGridArray[i].properties.LNG, countyGridArray[i].properties.LAT, new SpatialReference(website.Mapwkid));
                                    var graphic = new Graphic(point, countSym, dataArr[j]);
                                    var bakGraphic = new Graphic(point, red, dataArr[j]);
                                    focusPeopleLayer.add(bakGraphic);
                                    focusPeopleLayer.add(graphic);
                                    continue;
                                }
                            }
                        }
            })
        },
                    /*****************************各模块公用查询方法结束*****************************/
        //定义一个获取数据
         /*****************************地图网格范围查询开始*****************************/
                    // 属性查询
                    getGridListByAttribute(gridCode) {
                         loadModules([
                            'esri/geometry/Polygon',
                            'esri/graphic',
                            'esri/graphicsUtils'
                        ], { css: true })
                        .then(([Polygon,Graphic, graphicsUtils]) => {             
                            let _this = this;   
                        var layer = _this.config.baseGridServerUrl + getNextLevelGridServerNameByDeptCode(gridCode);
                        var appendParam = getAppendParamByDeptCode(gridCode);
                        var baseUrl = website.GeoServerBaseUrl + '/cite/ows?service=WFS&version=1.1.0&request=GetFeature&typename=' + layer + '&outputFormat=json&maxFeatures=80';
                        baseUrl += "&cql_filter=" + appendParam;
                        $.ajax({
                            type: 'post',
                            url: baseUrl,
                            dataType: 'json',
                            success: getGridListResult
                        });
                            function getGridListResult(result) {
                                gridGraphicsLayer.clear();
                                //textGraphicsLayer.clear();
                                // if (!countyGridArray)
                                    countyGridArray = result.features;
                                if(result.features.length === 0){
                                    // $.modal.alertWarning("此区域未划分网格。");
                                }else{
                                    for (var i = 0; i < result.features.length; i++) {
                                    var obj = result.features[i];
                                    var polygonJson;
                                    if (obj.geometry.type === "Polygon") {
                                        polygonJson = {"rings": obj.geometry.coordinates, "spatialReference": {"wkid": website.Mapwkid}};
                                    } else {
                                        var geoArr = [];
                                        for (var n = 0; n < obj.geometry.coordinates.length; n++) {
                                            geoArr.push(obj.geometry.coordinates[n][0]);
                                        }
                                        polygonJson = {"rings": geoArr, "spatialReference": {"wkid": website.Mapwkid}};
                                    }
                                    var polygon = new Polygon(polygonJson);
                                    var gra = new Graphic(polygon, gridFillSymbol, obj.properties);
                                    gridGraphicsLayer.add(gra);
                                }
                                map.setExtent(graphicsUtils.graphicsExtent(gridGraphicsLayer.graphics));
                                }
                                _this.getNextModuleData();
                            }
                        })
                    },
                    //重点人员查询
                    getFocusListByGrid(gridId) {
                        console.log("-----------------------------"+gridId);
                         getFocusListByGrid(gridId).then(res => {
                             const result = res.data;
                            this.focusData.FocusPeopleArr = result.data;
                            this.setListData(result.gridInfo,result.data);
                            }, error => {
                            window.console.log("根据网格查询网格员列表失败。接口：gis/getFocusListByGrid，错误信息：" + error);
                            });
                    },
                    setListData(gridInfo,focusPeopleArrResult){
                        //debugger
                        var content = "<div class='list-title'>" + gridInfo.deptName + "</div><ul>";
                        for (var i = 0; i < focusPeopleArrResult.length; i++) {
                            var li = " <li  class=\"item msginfo-yellow\" data='" + i + "' onClick='zoomToFocus(this)'>\n" +
                                "                                <div class=\"figure focus-list\"></div>\n" +
                                "                                <div class=\"figcaption\">\n" +
                                "                                    <div class=\"flag-title\">" + this.killNull(focusPeopleArrResult[i].name) + "</div>\n" +
                                "                                    <div class=\"flag-time\">\n" +
                                "                                        <div class=\"start\"> 类型：" + this.killNull(focusPeopleArrResult[i].typenameofkeypersonnel) + "</div>\n" +
                                "                                        <div class=\"end\">证件：" + this.killNull(focusPeopleArrResult[i].idcardno) + "</div>\n" +
                                "                                    </div>\n" +
                                "                                </div>\n" +
                                "                            </li>";
                            content += li;
                        }
                        content += "</ul>";
                        if (this.commonData.moduleOpenStatue.focus) {
                            $("#focusList").html(content);
                            $(".message-grid").animate({scrollTop: '0px'}, 400);
                        }
                    },
                    killNull(obj){
                        return obj ? obj : "";
                    },
                    addFocusOnMap(result) {
                        console.log("666666");
                        console.log(result);
                        loadModules([
                            'esri/geometry/Point',
                            'esri/graphic',
                            'esri/symbols/PictureMarkerSymbol',
                            'esri/InfoTemplate',
                            'esri/SpatialReference'
                        ], { css: true })
                        .then(([Point,Graphic,PictureMarkerSymbol,InfoTemplate,SpatialReference]) => {
                        console.log("77777");             
                        let _this = this;   
                        _this.focusData.FocusPeopleArr = result;
                         console.log("99999");
                        let focusPeopleArrResult = result;
                         console.log("8888");
                        console.log(focusPeopleArrResult);
                        map.infoWindow.resize(220, 300);
                        map.infoWindow.anchor = "ANCHOR_UPPERRIGHT";
                        var sym = new PictureMarkerSymbol("/img/focus_little.png", 26, 26);

                        for (var i = 0; i < focusPeopleArrResult.length; i++) {
                            if(!focusPeopleArrResult[i].lng)
                                continue;
                                console.log("lan===="+focusPeopleArrResult[i].lng);
                            var graphic = new Graphic(new Point(focusPeopleArrResult[i].lng, focusPeopleArrResult[i].lat, new SpatialReference(website.Mapwkid)), sym, focusPeopleArrResult[i]);
                            var infoDetail = "<div class=\"infoPopup highPopup\">\n" +
                                "                                <table class=\"infoTable\">\n" +
                                "                                    <tr>\n" +
                                "                                        <td class=\"info-name\" style='width: 50px;'>姓名：</td>\n" +
                                "                                        <td class=\"info-value\"  style='width: 150px;'>" + this.killNull(focusPeopleArrResult[i].name) + "</td>\n" +
                                "                                    </tr>\n" +
                                "                                    <tr>\n" +
                                "                                        <td class=\"info-name-dark\" style='width: 60px;'>证件：</td>\n" +
                                "                                        <td class=\"info-value-dark\" style='width: 100px;'>" + this.killNull(focusPeopleArrResult[i].idcardno) + "</td>\n" +
                                "                                    </tr>\n" +
                                "                                    <tr>\n" +
                                "                                        <td class=\"info-name-dark\" style='width: 60px;'>类型：</td>\n" +
                                "                                        <td class=\"info-value-dark\" style='width: 100px;'>" + this.killNull(focusPeopleArrResult[i].typenameofkeypersonnel) + "</td>\n" +
                                "                                    </tr>\n" +
                                "                                    <tr>\n" +
                                "                                        <td class=\"info-name-dark\" style='width: 60px;'>手机：</td>\n" +
                                "                                        <td class=\"info-value-dark\" style='width: 100px;'>" + this.killNull(focusPeopleArrResult[i].mobile) + "</td>\n" +
                                "                                    </tr>\n" +
                                "                                    <tr>\n" +
                                "                                        <td class=\"info-name-dark\" style='width: 60px;'>民族：</td>\n" +
                                "                                        <td class=\"info-value-dark\" style='width: 100px;'>" + this.killNull(focusPeopleArrResult[i].nation) + "</td>\n" +
                                "                                    </tr>\n" +
                                "                                    <tr>\n" +
                                "                                        <td class=\"info-name-dark\" style='width: 60px;'>宗教：</td>\n" +
                                "                                        <td class=\"info-value-dark\" style='width: 100px;'>" + this.killNull(focusPeopleArrResult[i].religion) + "</td>\n" +
                                "                                    </tr>\n" +
                                "                                </table>\n" +
                                "<div class=\"more\">" +
                                "<div onclick='showDetail(\"" + focusPeopleArrResult[i].id + "\")'>详细信息</div>" +
                                "</div>" +
                                "</div>";
                            var infoTemplate = new InfoTemplate("重点人员信息", infoDetail);
                            graphic.setInfoTemplate(infoTemplate);
                            focusPeopleLayer.add(graphic);
                        }
                        focusPeopleLayer.refresh();
                        })
                    },
                    zoomToFocus(tar) {
                        console.log(tar)
                        loadModules([
                            'esri/geometry/Point',
                            'esri/graphic',
                            'esri/symbols/PictureMarkerSymbol',
                            'esri/InfoTemplate',
                            'esri/SpatialReference'
                        ], { css: true })
                        .then(([Point,Graphic,PictureMarkerSymbol,InfoTemplate,SpatialReference]) => {
                            let _this = this;
                        var obj = _this.focusData.FocusPeopleArr[$(tar).attr("data")];
                        if(!obj.lng){
                            $.modal.alertWarning("此重点人员未采集点位信息。");
                            return;
                        }
                        var point = new Point(obj.lng, obj.lat, new SpatialReference(website.Mapwkid));
                        var infoDetail = "<div class=\"infoPopup highPopup\">\n" +
                            "                                <table class=\"infoTable\">\n" +
                            "                                    <tr>\n" +
                            "                                        <td class=\"info-name\" style='width: 50px;'>姓名：</td>\n" +
                            "                                        <td class=\"info-value\"  style='width: 150px;'>"+ this.killNull(obj.name) +"</td>\n" +
                            "                                    </tr>\n" +
                            "                                    <tr>\n" +
                            "                                        <td class=\"info-name-dark\" style='width: 60px;'>证件：</td>\n" +
                            "                                        <td class=\"info-value-dark\" style='width: 100px;'>" + this.killNull(obj.idcardno) + "</td>\n" +
                            "                                    </tr>\n" +
                            "                                    <tr>\n" +
                            "                                        <td class=\"info-name-dark\" style='width: 60px;'>类型：</td>\n" +
                            "                                        <td class=\"info-value-dark\" style='width: 100px;'>" + this.killNull(obj.typenameofkeypersonnel) + "</td>\n" +
                            "                                    </tr>\n" +
                            "                                    <tr>\n" +
                            "                                        <td class=\"info-name-dark\" style='width: 60px;'>手机：</td>\n" +
                            "                                        <td class=\"info-value-dark\" style='width: 100px;'>" + this.killNull(obj.mobile) + "</td>\n" +
                            "                                    </tr>\n" +
                            "                                    <tr>\n" +
                            "                                        <td class=\"info-name-dark\" style='width: 60px;'>民族：</td>\n" +
                            "                                        <td class=\"info-value-dark\" style='width: 100px;'>" + this.killNull(obj.nation) + "</td>\n" +
                            "                                    </tr>\n" +
                            "                                    <tr>\n" +
                            "                                        <td class=\"info-name-dark\" style='width: 60px;'>宗教：</td>\n" +
                            "                                        <td class=\"info-value-dark\" style='width: 100px;'>" + this.killNull(obj.religion) + "</td>\n" +
                            "                                    </tr>\n" +
                            "                                </table>\n" +
                            "<div class=\"more\">" +
                            "<div onclick='showDetail(\"" + obj.id + "\")'>详细信息</div>" +
                            "</div>" +
                            "</div>";
                        var onlineSym = new PictureMarkerSymbol("../img/gis/icon/member_1.png", 26, 26);
                        var graphic = new Graphic(point, onlineSym, obj);

                        var infoTemplate = new InfoTemplate("重点人员信息", infoDetail);
                        graphic.setInfoTemplate(infoTemplate);
                        focusPeopleLayer.add(graphic);

                        map.infoWindow.setTitle("重点人员信息");
                        map.infoWindow.setContent(infoDetail);
                        map.infoWindow.show(point);
                        map.centerAt(point);
                        })
                    },
    },
  mounted() {
     
  },

  beforeDestroy() {
    if (this.view) {
      // destroy the map view
      this.view.container = null
    }
  },
}
</script>
 
<style lang="scss" scoped>

</style>